<template>
  <div class="flex">
    <a-card title="自定义更多插槽">
      <aMore>
        ByteDance's core product, Toutiao ("Headlines"), is a content platform
        in China and around the world. Toutiao started out as a news
        recommendation engine and gradually evolved into a platform delivering
        content in various formats.
        <template #expand-node="{ expanded }">
          {{ expanded ? "More" : "" }}
        </template>
      </aMore>
    </a-card>
    <a-card title="基本展示">
      <aMore>
        ByteDance's core product, Toutiao ("Headlines"), is a content platform
        in China and around the world. Toutiao started out as a news
        recommendation engine and gradually evolved into a platform delivering
        content in various formats.
      </aMore>
    </a-card>
    <a-card title="不显示收起">
      <aMore :show-putitaway="false">
        ByteDance's core product, Toutiao ("Headlines"), is a content platform
        in China and around the world. Toutiao started out as a news
        recommendation engine and gradually evolved into a platform delivering
        content in various formats. ByteDance's core product, Toutiao
        ("Headlines"), is a content platform in China and around the world.
        Toutiao started out as a news recommendation engine and gradually
        evolved into a platform delivering content in various formats.
        ByteDance's core product, Toutiao ("Headlines"), is a content platform
        in China and around the world. Toutiao started out as a news
        recommendation engine and gradually evolved into a platform delivering
        content in various formats.
      </aMore>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import aCard from "@/ArcoUni/components/arco-card/index.vue";
import aMore from "@/ArcoUni/components/arco-more/index.vue";
</script>

<style lang="scss" scoped>
.flex {
  height: 100vh;
  padding: 200rpx 20rpx;
  background: #e5e5e5;
}
:deep(.arco-card) {
  margin-bottom: 30rpx;
}
</style>
